<template>
  <div class="account-query-container">
    <div class="account-query">
      <h1>我的任务</h1>
      <ui-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="{margin-left: -20px;}">
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-col :span="8">
            <ui-form-item prop="type" label="任务名称">
              <ui-input v-model="ruleForm.customerNo" placeholder="请输入客户号" class="input-width"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="8">
            <ui-form-item prop="institution" label="任务状态">
              <ui-select v-model="ruleForm.institution" placeholder="请选择">
                <ui-option label="区域一" value="shanghai"></ui-option>
                <ui-option label="区域二" value="beijing"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
        </ui-row>

        <ui-row type="flex" class="row-bg" justify="center">
          <ui-col :span="8">
            <ui-form-item prop="type" label="生成日期">
              <ui-date-picker v-model="ruleForm.time" type="date" placeholder="选择日期"></ui-date-picker>
            </ui-form-item>
          </ui-col>
          <ui-col :span="8"> </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-button type="primary" @click="submitForm('ruleForm')">查询</ui-button>
          <ui-button @click="resetForm('ruleForm')">重置</ui-button>
        </ui-row>
      </ui-form>
    </div>
    <div class="account-list">
      <div class="list-title">任务列表</div>
      <div class="list-tabble">
        <vx-table :table-data="tableData" :columns="columns" :customer-style="true">
          <template slot="operation" slot-scope="scope">
            <ui-link type="danger" :underline="false" @click="goDetails(scope)">详情</ui-link>
          </template>
        </vx-table>
        <!-- 分页器 -->
        <div class="page">
          <ui-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="totalPage"
          >
          </ui-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vxTable from '@/components/vx-table';
export default {
  name: 'accountQuery',
  components: {
    vxTable,
  },
  data() {
    return {
      ruleForm: {},
      totalPage: 100,
      currentPage: 1,
      tableData: [
        {
          customerNo: '10086',
          customerName: '科蓝公司',
          customerType: '零售',
          phone: '15112345263',
        },
      ],
      columns: [
        {
          prop: 'customerNo',
          label: '任务名称',
          fixed: true,
        },
        {
          prop: 'customerName',
          label: '生成日期',
          fixed: true,
        },
        {
          prop: 'customerType',
          label: '任务状态',
          fixed: true,
        },
        {
          prop: 'phone',
          label: '任务内容',
          fixed: true,
        },
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
    };
  },
  methods: {
    // 未分配贵宾客户列表
    goDetails(item) {
      this.$router.push({ path: '/customerdivision/vipCustomers/vipCustomersUnassigned' });
    },
  },
};
</script>

<style lang="scss" scoped>
.account-query-container {
  .account-query {
    h1 {
      font-size: 20px;
    }
    .input-width {
      padding-left: 10px;
      width: 97%;
    }
  }
  .account-list {
    margin-top: 10px;
    .list-title {
      margin-bottom: 10px;
      color: #333;
      font-weight: 600;
      font-size: 20px;
    }
    .list-tabble {
      .page {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
      }
    }
  }
}
::v-deep .ui-date-editor--date .ui-input__prefix {
  display: none;
}
::v-deep .ui-date-editor.ui-input {
  width: 100%;
}
</style>
